<template>
    <view class="container">
        <image class="avater section" :src="unit.avatar" mode="aspectFill"></image>
        <view class="content section">
            <article-content :article='unit.aloudArticle' :lightPointWord='false' :hidePointWord='false'
                :currentIndex='currentIndex' @tapItem='tapItem'></article-content>
        </view>
        <view class="bottom">
            <view class="bottom fixed-bottom c-position_fixed c-flex_row">
                <view class="record c-flex_1">
                    <record-button ref="record" :total='unit.aloudArticleTotal' :content='recordContent'
                        :index='currentIndex' :articleId='unit.id' @next='next'></record-button>
                </view>
            </view>
        </view>
        <question-result-pop ref='resultPop' @resultChange='answerResultChange' @start='start'></question-result-pop>
    </view>
</template>

<script>
    import UnitDetailMixin from "../../mixins/unit-detail-mixin.js";
    import ContentMixin from "../../mixins/content-mixin.js";
    import articleContent from "../../components/article-content.vue";
    import recordButton from "../../components/record-button.vue";
    import {
        getAloudAnswerResult
    } from "../../services/index.js"
    import AnswerResultModel from "../../models/answerResultModel.js";
    import QuestionResultPop from "../../components/question-result-pop.vue";
    export default {
        components: {
            QuestionResultPop,
            articleContent,
            recordButton
        },
        mixins: [UnitDetailMixin, ContentMixin],
        data() {
            return {
                currentIndex: 0, // 当前要朗读文本index
                answerResult: null, // 答题结果
            }
        },
        watch: {
            unit: function(n) {
                if (n) {
                    this.$refs.resultPop.showPop(true, 'aloud', n.id);
                }
            },
            answerResult: function(n) {
                // 根据答题结果初始化当前要朗读文本index
                if (n) {
                    this.currentIndex = n.list.length;
                }
            }
        },
        computed: {
            // 要朗读的文本内容
            recordContent: function() {
                if (!this.unit || !this.unit.aloudArticle) return "";
                // 遍历文章
                for (let pIndex = 0; pIndex < this.unit.aloudArticle.length; pIndex++) {
                    let pItem = this.unit.aloudArticle[pIndex];
                    // 判断是否有index，有index既无childs
                    if (pItem.index !== undefined) {
                        // 无childs，h1 标签
                        // 匹配index，false 进入下一个循环， true 返回结果
                        if (pItem.index == this.currentIndex) {
                            return pItem.content;
                        }
                    } else {
                        // 有childs
                        // 遍历childs
                        for (let sIndex = 0; sIndex < pItem.childs.length; sIndex++) {
                            let sItem = pItem.childs[sIndex];
                            // 匹配index，false 进入下一个循环， true 返回结果
                            if (sItem.index == this.currentIndex) {
                                return sItem.content;
                            }
                        }
                    }
                }
                // index 不匹配
                return "";
            }
        },
        methods: {
            tapItem(e) {
                console.log(e);
            },
            // 朗读完成 下一个
            next(e) {
                this.currentIndex++;
                // 全部朗读完成
                if (e.finish) {
                    this.$refs.resultPop.showPop(true, 'aloud', this.unit.id);
                }
            },
            // result pop 获取 answerResult 回调
            answerResultChange(e) {
                this.answerResult = e.result;
            },
            start() {}
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../styles/sub-page.scss";
</style>